<script setup lang="ts">
const props=defineProps<{
  time:string,
  start:string,
  end:string,
  status:number,
  quantity:number
}>()
let date=ref(new Date(props.time))
</script>

<template>
  <div class="item">
    <p class="time">出行时间：{{ date.getFullYear() }}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</p>
    <p>出发地：{{ start }}</p>
    <p>目的地：{{ end }}</p>
    <p>座位数：{{ quantity }}</p>
    <p style="position: relative;font-weight: bold;display: flex;justify-content: right;padding-right: 10px">
      <span v-if="status===3 " style="color:green">
        已送达
      </span>
      <span v-else-if="status===0 " style="color:RGB(51,136,204)">
        邀请中
      </span>
      <span v-else-if="status===1 " style="color:RGB(218,165,59)">
        已发车
      </span>
    </p>
  </div>
</template>

<style scoped>
.item {
  background-color: RGB(247, 248, 250);
  border-radius: 15px;
  padding: 13px;
  margin: 13px 18px;
  border: 1px solid gray;
  position: relative;
}

.time {
  color: rgb(184, 134, 11);
}

.item p {
  word-break: break-all;
}
</style>